<template>
  <div class="alldate">
    <el-row :gutter="20">
      <el-col :lg="8" :md="8" :sm="12" :xs="24">
        <el-card class="card"
          ><div
            style="display: flex; justify-content: space-between; align-items: baseline"
          >
            <div style="font-size: 30px; font-weight: bold; color:rgb(0, 0, 0)">
              <i class="el-icon-s-help" /> 所在班级:
            </div>
            <div style="font-size: 30px; color: #606266">
              {{ user.clazz }}
            </div>
          </div></el-card
        ></el-col
      >
      <el-col :lg="8" :md="8" :sm="12" :xs="24">
        <el-card class="card"
          ><div
            style="display: flex; justify-content: space-between; align-items: baseline"
          >
            <div style="font-size: 30px; font-weight: bold; color:#f4b2a6">
              <i class="el-icon-user-solid" /> 班级人数:
            </div>
            <div style="font-size: 30px; color: #606266">
              {{ this.allstudent }}
            </div>
          </div></el-card
        ></el-col
      >
      <el-col :lg="8" :md="8" :sm="12" :xs="24">
        <el-card class="card"
          ><div
            style="display: flex; justify-content: space-between; align-items: baseline"
          >
            <div style="font-size: 30px; font-weight: bold; color:#23c8b2">
              <i class="el-icon-user" /> 老师人数:
            </div>
            <div style="font-size: 30px; color: #606266">
              {{ this.allteacher }}
            </div>
          </div></el-card
        ></el-col
      >
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <div class="chart-title">老师信息</div>
          <teacherMessage />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div class="chart-title">班级跑步汇总</div>
          <rundate />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import teacherMessage from "../Teachers/teacherMessage.vue";
import rundate from "../Students/rundate.vue"
export default {
  components: { teacherMessage, rundate},
  data() {
    return {
      mileage: "",
      allstudent: "",
      allteacher: "",
      user: JSON.parse(window.sessionStorage.getItem("user")),
      size: "",
    };
  },
  mounted() {
    this.getRequest("/clazz/" + this.user.clazz, {}).then((resp) => {
      let allstudent = 0,
        mileage = 0;
      for (var i = 0; i < resp.length; i++) {
        this.allstudent++;
      }
    }),
      this.getRequest("/class/" + this.user.clazz, {}).then((resp) => {
        for (var i = 0; i < resp.length; i++) {
          this.allteacher++;
        }
      });
  },
  methods: {},
};
</script>

<style>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.card {
  height: 80px;
  margin-bottom: 12px;
}
</style>
